window.addEventListener("load", function () {
	// 功能一：动态渲染API分类区
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	let html = ``;
	// 1.获取后台数据进行遍历
	apiTypeData.forEach(function (v, i) {
		// console.log(v);
		// 2.拼接HTML结构
		if (i === 0) {
			html += `<li title="${v.keyword}" class="active">${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li title="${v.keyword}" class="fw-bold" >${v.name}</li>`;
		} else {
			html += `<li title="${v.keyword}">${v.name}</li>`;
		}
	});
	// 3.将HTML结构放入对应位置
	$("#apiList ul").innerHTML = html;

	// 功能二:点击搜索框实现联动
	// 1.获取li数据进行遍历
	$("#apiList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// console.log(v.textContent);
			// 2.将li里面的文本内容显示到strong标签上
			// $("#apiList .input strong").textContent = v.textContent;
			// $("#apiList .input input").placeholder = v.getAttribute("keyword");
			$("#apiList li").forEach(function (v) {
				// 排他思想：先把所有样式清空
				v.classList.remove("active");
			});
			// 再给点击对象增加激活样式
			this.classList.add("active");
			$("#apiList strong").textContent = v.textContent;
			$("#apiList input").placeholder = this.title;
		});
	});

	// 功能三：动态渲染卡片区
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报2", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	// 1.获取后台数据，进行遍历
	let cardsHtml = "";
	listDataArr.forEach(function (v) {
		// 2.遍历拼接为HTML结构
		cardsHtml += `
            <li class="rel">
            <img src="../imgs/${v.img}" alt="图片加载失败" />
            <p>${v.name}</p>
            <p class = "${v.isSpecial ? "fc-red" : "fc-green"}">${v.price}</p>
            ${v.isSpecial ? '<span class="abs">企业专用</span>' : ""}
            <a href="#" class="abs">申请数据</a>
            </li>`;
	});
	// 3.将HTML结构放在指定位置
	$("#cards ul").innerHTML = cardsHtml;

	// 功能四：分页器增加激活样式
	// 1.遍历获取每个元素
	$("#pinstance li").forEach(function (v, i) {
		// 2.绑定点击事件
		v.addEventListener("click", function () {
			// 排他思想：点击指定元素其他元素样式清空
			$("#pinstance li").forEach(function (v, i) {
				v.classList.remove("active");
			});
			v.classList.add("active");
			// 获取点击的分页器的页数
			const pagination = Number(this.textContent);
			render(pagination, 5, listDataArr);
		});
	});

	// 功能五：点击分页器实现卡片区的分页，封装一个渲染函数
	// console.log(listDataArr.slice(0, 5));
	// console.log(listDataArr.slice(5, 10));
	// console.log(listDataArr.slice(10, 15));
	// console.log(listDataArr.slice(15, 20));
	function render(pagination, pageSize, arr) {
		// 求开始索引：(当前页码 - 1)* 每页条数   结束索引：开始索引+每页显示的条数
		let startIndex = (pagination - 1) * pageSize;
		//当前页码：pagination  pageSize  总条数（原数据）：arr
		let result = arr.slice(startIndex, startIndex + pageSize);
		let cardsHtml = "";
		// 获取后台数据进行遍历
		result.forEach(function (v) {
			cardsHtml += `
				<li class="rel">
				<img src="../imgs/${v.img}" alt="图片加载失败" />
				<p>${v.name}</p>
				<p class = "${v.isSpecial ? "fc-red" : "fc-green"}" >${v.price}</p>
				${v.isSpecial ? '<span class="abs">企业专用</span>' : ""}
				<a href="#" class="abs">申请数据</a>
				</li>`;
		});
		$("#cards ul").innerHTML = cardsHtml;
	}
	render(1, 10, listDataArr); // 默认加载第一页

	// 功能六：点击申请数据显示蒙层
	$("#cards ul").addEventListener("click", function (e) {
		// 根据事件源localName属性进行区分
		// console.log(e.target.localName);
		if (e.target.localName === "a") {
			$("#mask").style.display = "block";
			// 开启蒙层后隐藏滚动条(滚动条是body或根元素的一部分)
			document.body.style.overflow = "hidden";
			// 阻止默认跳转事件
			e.preventDefault();
		}
	});
	// 点击蒙层关闭蒙层
	$("#mask").addEventListener("click", function () {
		this.style.display = "none";
		// 关闭蒙层后显示滚动条
		document.body.style.overflow = ""; //auto
	});
	// 阻止冒泡事件
	$("#mask #loginModal").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	// 功能七：点击对应按钮显示对应登录、扫码页面，对应按钮要激活
	// 点击对应按钮激活相关样式
	$("#loginModalTab #login a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 排他思想：先移出所有a标签的激活样式
			$("#loginModalTab #login a").forEach(function (item, index) {
				item.classList.remove("active");
				// a标签和form标签的索引是一一对应的，数量也是一致的
				$("#loginModalTab form")[index].style.display = "none";
			});
			// 再次点击增加样式
			v.classList.add("active");
			// 显示对应的form表单
			$("#loginModalTab form")[i].style.display = "block";
		});
	});
	// 点击账号登录跳转到对应页面
	// $("#loginModalTab #login a:first-child").addEventListener(
	// 	"click",
	// 	function () {
	// 		// 点击登录页面隐藏扫码页面
	// 		$("#sweepCode").style.display = "none";
	// 		// 点击登录页面显示登录页面
	// 		$("#loginModalTab form").style.display = "block";
	// 	}
	// );

	// // 点击扫码登录跳转到对应页面
	// $("#loginModalTab #login a:last-child").addEventListener(
	// 	"click",
	// 	function () {
	// 		// 点击扫码页面隐藏扫码页面
	// 		$("#sweepCode").style.display = "block";
	// 		// 点击扫码页面隐藏登录页面
	// 		$("#loginModalTab form").style.display = "none";
	// 	}
	// );

	// 回到顶部
	// 绑定点击事件
	$("span.iconfont").addEventListener("click", function () {
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	});
	// 判断滚动事件
	this.window.addEventListener("scroll", function () {
		if (window.scrollY < 500) {
			$("span.iconfont").style.display = "none";
		} else if (window.scrollY > 500) {
			$("span.iconfont").style.display = "block";
		}
	});
});
